<template>
  <div class="exambox">
    <div class="head flex item-center">
      <el-radio-group @input="changeType" v-model="params.status" size="medium">
        <el-radio-button v-for="item in studyStatus" :key="item.id" 
          :label="item.value" >{{ item.title }}</el-radio-button>
      </el-radio-group>
      <div class="flex" style="margin-left: 20px;">
        <el-input 
        @keyup.enter.native="handleKeyup"
          v-model="params.name" placeholder="请输入内容"></el-input>
        <el-button @click="search()" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="content">
        <ul style="margin-bottom: 10px;">
        <li class="flex shadow-bottom between" v-for="item of papers" :key="item.id">
          <div class="titlebox" style="margin-right: 20px;">
            <div style="width: 60px; height: 60px; border-radius: 7px; background-color: #eee;">

            </div>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p class="black bold large">{{ item.name }}</p>
              <div>
                <p>{{ item.start_time }}</p>
                <p>至</p>
                <p>{{ item.end_time }}</p>
              </div>
              <!-- <p>{{ item.start_time + '至' + item.end_time }}</p> -->
          </div>
          <div class="titlebox" style="flex: 1;">
              <p>编码</p>
              <p>{{ item.code }}</p>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p> <span>组卷模式：</span> <span>固定组卷</span> </p>
              <p> <span>乱序模式：</span> <span>正序</span> </p>
              <p> <span>答题模式：</span> <span>{{ item.answer_mode == '0' ? '不显示答案' : '显示答案' }}</span> </p>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p> <span>交卷次数：</span> <span>{{ item.cruise_num }}</span> </p>
              <p> <span>考试时长：</span> <span>{{ item.duration }}</span> </p>
              <p> <span>及格分数线：</span> <span>{{ item.comply_line }}</span> </p>
          </div>
          <div class="titlebox" style="flex: 1.5;">
            <p> <span>成绩显示：</span> <span>{{ item.dx_score_mode == '0' ? '显示' : '不显示' }}</span> </p>
            <p> <span>多选题得分模式：</span> <span>漏选得分50%</span> </p>
            <p> <span>填空题得分模式：</span> <span>漏填得分50%</span> </p>
          </div>
          <div class="titlebox" style="width: 100px;">
              <el-button @click="handleExam(item)">开始考试</el-button>
          </div>
        </li>
      </ul>
      <el-pagination background layout="prev, pager, next" :total="total"
        @current-change="changePage"
        :page-count="total % params.pageSize == 0 ? total / params.pageSize : total / params.pageSize + 1"
      ></el-pagination>
    </div>

    <el-dialog
      title="考试规则"
      :visible.sync="visible"
      width="50%"
      :before-close="handleClose">
      <div class="exam-desc">
        <ul>
          <li class="flex">
            <div style="width: 100px;" class="black bold large">考试名称：</div>
            <div>{{ currentPaper.name }}</div>
          </li>
          <li class="flex">
            <div style="width: 100px;" class="black bold large">考试时间：</div>
            <div>{{ currentPaper.start_time + ' 至 ' + currentPaper.end_time }}</div>
          </li>
          <li class="flex">
            <div style="width: 100px;" class="black bold large">考试时长：</div>
            <div>{{ currentPaper.duration}}</div>
          </li>
          <li class="flex">
            <div style="width: 100px;" class="black bold large">规则说明：</div>
            <div v-html="currentPaper.question_rule"></div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toExam()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api'
export default {
    data() {
        return {
          visible: false,
          params: {
            pageNum: 1,
            pageSize: 5,
            status: null
          },
          total: 0,
          studyStatus: [
            { id: 1, value: null, title: '全部', current: true },
            { id: 2, value: 1, title: '未开始', current: false },
            { id: 3, value: 2, title: '进行中', current: false },
            { id: 4, value: 3, title: '已结束', current: false }
          ],
          papers: [
            
          ],
          currentPaper: {}
        }
    },
    mounted() {
      this.getPaperList()
    },
    methods: {
      handleClose() {

      },
      handleExam(item) {
        this.currentPaper = item
        this.visible = true
      },
      toExam() {
        this.$router.push(`/info/exam/${this.currentPaper.id}`)
      },
        getPaperList() {
          Api.examPaperListPage(this.params).then(res => {
            this.papers = res.data.rows || []
            this.total = res.data.total
          })
        },
        changePage(val) {
          this.params.pageNum = val
          this.getPaperList()
        },
        search() {
          if (!this.params.name || !this.params.name.trim().length) {
            this.params.name = null
          }
          this.params.pageNum = 1
          this.params.pageSize = 5
          this.getPaperList()
        },
        handleKeyup(event) {
          if (event.keyCode === 13 && !event.shiftKey) {
            this.search()
          }
        },
        changeType() {
          this.params.pageNum = 1
          this.params.pageSize = 5
          this.getPaperList()
        },
    }
}
</script>

<style lang="scss" scoped>

  .head {
    margin: 20px 0;
    justify-content: flex-end;
  }
  .content {
    >ul {
      >li {
        margin-top: 20px;
        transition: all .3s;
        height: 130px;
        padding: 15px 20px;
        &:hover {
          box-shadow: 0 5px 20px #ddd;
        }
        &>div:first-of-type {
          height: 100%;
          .img-center {
              margin-right: 10px;
              width: 250px;
              height: 100%;
          }
        }
        .titlebox {
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-around;
        } 
      }
      
    }
  }

  .exam-desc {
    li {
      margin: 20px 0;
    }
  }
</style>